<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>flyingon数据绑定演示</title>
    <link rel="stylesheet" type="text/css" href="../css/default/flyingon.css" />
    <style type="text/css">

    html, body {
        margin:0;
        border:0;
        padding:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    </style>
    <script type="text/javascript" src="../js/flyingon.js"></script>
</head>
<body style="padding:10px;">
    
    <div>
        <input type="button" value="上一条" onclick = "window.dataset.previous();" />
        <input type="button" value="下一条" onclick = "window.dataset.next();" />
        <input type="button" value="获取的变更行的数据" onclick = "alert(window.dataset.getChanges().toJSON());" />
        <input type="button" value="获取的变更行的数据(仅变化的字段)" onclick = "alert(window.dataset.getChanges().toJSON(true));" />
        <input type="button" value="接受变更" onclick = "window.dataset.acceptChanges();" />
        <input type="button" value="取消变更" onclick = "window.dataset.rejectChanges();" />
    </div>
    <div style="margin-top:8px;">
        <input type="button" value="获取field1值" onclick = "datasetValue('field1');" />
        <input type="button" value="获取field2值" onclick = "datasetValue('field2');" />
        <input type="button" value="获取field3值" onclick = "datasetValue('field3');" />
        <input type="button" value="获取color1值" onclick = "datasetValue('color1');" />
        <input type="button" value="获取color2值" onclick = "datasetValue('color2');" />
        <input type="button" value="获取color3值" onclick = "datasetValue('color3');" />
    </div>
    <div style="margin:8px 0;">
        <input type="button" value="设置field1值" onclick = "datasetValue('field1', 1);" />
        <input type="button" value="设置field2值" onclick = "datasetValue('field2', 1);" />
        <input type="button" value="设置field3值" onclick = "datasetValue('field3', 1);" />
        <input type="button" value="设置color1值" onclick = "datasetValue('color1', 2);" />
        <input type="button" value="设置color2值" onclick = "datasetValue('color2', 2);" />
        <input type="button" value="设置color3值" onclick = "datasetValue('color3', 2);" />
    </div>
    <div id="host"></div>
    
    <script type="text/javascript">
        
        
        var dataset = new flyingon.DataSet();
        
        var data = [];
        
        for (var i = 1; i <= 10; i++)
        {
            data.push({ 
                
                key: i, 
                field1: 'text 1 row:' + i, 
                field2: 'text 2 row:' + i, 
                field3: 'text 3 row:' + i,
                color1: 'yellow',
                color2: 'gold',
                color3: 'skyblue'
            });
        }
        
        dataset.load(data);
        
        
        var panel = flyingon.ui({

            Class: 'Panel',
            width: 1000,
            height: 200,
            border: 1,
            padding: 8,
            layout: 'flow',
            style: 'border: 1px solid',
            dataset: dataset,

            children: function (list) {

                for (var i = 0; i < 9; i++)
                {
                    list.push({
                        
                        Class: 'TextBox',
                        width: '300',
                        value: '{{field' + ((i % 3) + 1) + '}}',
                        backgroundBolor: '{{color' + ((i % 3) + 1) + '}}'
                    });
                }
            }
            
        }, false);

 
        dataset.bind();
        
        
        function datasetValue(name, type) {
          
            var row = dataset.current();
            
            switch (type)
            {
                case 1:
                    return row.set(name, new Date().toString());
                    
                case 2:
                    return row.set(name, '#' + new Array(3).join(((Math.random() * 8 | 0) + 8).toString(16)) + '0');
                    
                default:
                    return alert(row.get(name));
            }
        };
        

        flyingon.show(panel, 'host');


    </script>

</body>
</html>